import React, {Component} from 'react';
import { hashHistory } from 'react-router';
import { Icon, Button, Table, Input, Select, Modal, Form, message } from 'antd';
import PropTypes from 'prop-types';
import { bindActionCreators } from 'redux'; 
import { connect } from 'react-redux';

import BreadcrumbBar from '@/common/BreadcrumbBar';//面包屑组件
import ToolBar from '@/common/ToolBar';//操作栏组件
import { proposalPaging, deleteProposalById, queryProposalById } from '../action';
import { getParams } from '@/utils/tool';

const Search = Input.Search;
const Option = Select.Option;
const confirm = Modal.confirm;

const mapStoreStateToProps = state => ({
	suggestState: state.suggest
});

const mapDispatchToProps = dispatch => bindActionCreators({
	proposalPaging: proposalPaging,
	deleteProposalById: deleteProposalById,
	queryProposalById: queryProposalById
}, dispatch);

class SuggestionList extends Component {
	constructor(props) {
		super(props);	
		this.state = {
			showForm_add: false,
			current: 1,
			pageSize: 10,
			proposalPersonName: null,//建议人姓名
			wfmStatus:null,//流程状态
		}

		this.columns = [
			{ title: '建议日期', dataIndex: 'created_at', },
			{ title: '建议标题', dataIndex: 'subject', },
			{ title: '建议分类', dataIndex: 'proposalTypeName',},
			{ title: '建议人', dataIndex: 'proposalPersonName', },
			{ title: '联系电话', dataIndex: 'contactPhone', },
			{ title: '部门', dataIndex: 'proposalPersonDeptName', },
			{ title: '状态', dataIndex: 'wfmStatus', 
				render: (text, record, index) => {
					if(text == 0){
						return <span className="span-color-error">未办理</span>
					}else if(text == 1){
						return <span className="span-color-process">办理中</span>
					}else if(text == 2){
						return <span className="span-color-success">已办理</span>
					}
				}
			},
			{ title: '操作', dataIndex: 'operator',
				render: (text, record, index) => {
					return (
						<div>
							<Button onClick={()=>this.viewDetail(record)}>查看</Button>&nbsp;
							<Button type="danger" onClick={()=>this.dele(record)}>删除</Button>
						</div>
					)
				}
			},
		];
	}

	componentDidMount = () => {
		
		this.fetchData(this.state.current, this.state.pageSize, this.getParams());

	}

	// shouldComponentUpdate = (nextProps, nextState) => {
	// 	console.log(nextProps, nextState)
	// 	return true;
	// }

	componentWillUnmount = () => {
		this.setState = (state,callback)=>{
          return;
        };
	}

	//获取参数列表
	getParams = () => {
		let params = {};

		if(this.state.wfmStatus!=null){
			params.wfmStatus = this.state.wfmStatus
		}
		if(this.state.proposalPersonName){
			params.proposalPersonName = this.state.proposalPersonName
		}

		// console.log(params)

		return params;
	}

	//请求列表数据
	fetchData = (current, pageSize, _data) => {
		this.props.proposalPaging(current, pageSize, _data)
	}

	//分页
	changePage = (current, pageSize) => {
		this.setState({ current: current }, () => {
			this.fetchData(this.state.current, this.state.pageSize, this.getParams());
		})
	}

	//根据id删除记录
	dele = (record) => {
		let _this = this;
		confirm({
			title: '确定删除吗?',
			content: '删除之后数据不能恢复',
			onOk() {
				_this.sureDelete(record.id)
			},
			onCancel() {
			//   console.log('Cancel');
			}
		});
	}
	// 确认删除
	sureDelete = (_id) => {
		this.props.deleteProposalById(_id)
		// this.fetchData(this.state.current, this.state.pageSize, this.getParams());
		
	}

	// 查看详情
	viewDetail = (record) => {
		let _id = record.id;
		this.props.queryProposalById(_id);
		hashHistory.push(`/app/suggestion/viewSuggest/${_id}`)
	}

	//根据名字模糊搜索
	filterByName = (value) => {
		if(value){
			this.setState({ proposalPersonName: value }, ()=> {
				this.fetchData(this.state.current, this.state.pageSize, this.getParams());
			})
		}else{
			this.setState({ proposalPersonName: null }, ()=> {
				this.fetchData(this.state.current, this.state.pageSize, this.getParams());
			})
		}
	}

	//根据流程状态筛选
	filterBywfmStatus = (value) => {
		if(value != "all"){
			this.setState({ wfmStatus: value }, ()=> {
				this.fetchData(this.state.current, this.state.pageSize, this.getParams());
			})
		}else{
			this.setState({ wfmStatus: null }, ()=> {
				this.fetchData(this.state.current, this.state.pageSize, this.getParams());
			})
		}
	}

	//跳转至新建页
	handleAdd = () => {
		hashHistory.push(`/app/suggestion/addSuggest`)
	}

    render() {

        return (
            <div>
		   		<BreadcrumbBar one="员工建议" two="我的建议" />
                <ToolBar>
					<Button onClick={this.handleAdd}>新建</Button>
					<Select defaultValue="all" style={{ width: 120, marginLeft: 10 }} onChange={this.filterBywfmStatus}>
						<Option value="all">全部</Option>
						<Option value="0">未办理</Option>
						<Option value="1">办理中</Option>
						<Option value="2">已办理</Option>
					</Select>
                    <Search placeholder="请输入姓名" 
						onSearch={this.filterByName}
						style={{ width: 200, float: 'right' }}
					/>
                </ToolBar>
				<Table 
					dataSource={this.props.suggestState.dataSource}
					rowKey={record => record.id}
					columns={this.columns} 
					loading={this.props.suggestState.loading}
					pagination={{
						current:this.state.current,
						pageSize:this.state.pageSize,
						total:this.props.suggestState.total,
						onChange: this.changePage,
						showTotal:(total, range) => `共 ${total} 条  显示  ${range[0]}-${range[1]} 条`
					}}
					bordered={true} 
				/>
		   </div>
        )

    }
}

SuggestionList.PropTypes = {
	suggestState: PropTypes.object.isRequired,
	proposalPaging: PropTypes.func.isRequired,
	queryProposalById: PropTypes.func.isRequired
}

export default connect(mapStoreStateToProps, mapDispatchToProps)(SuggestionList);